.slider {
    width: 100%;
    // background: rgb(255 255 255 / 10%);
    background-color: rgb(183 183 183 / 10%);
    height: 5px;
    border-radius: 5px;
    transition: height 0.15s ease-out;
    position: relative;

    &.vertical {
        margin: 0 auto;
        width: 5px;
        background: #131313;
        height: 200px;
        border-radius: 5px;
        transition: width 0.15s ease-out;
        // transform: rotate(180deg);

        .range {
            height: 0;
            max-height: 200px;
            background: var(--accent-color);
            width: 100%;
            border-radius: 5px;
            bottom: 0;
            position: absolute;
            z-index: 2;

            transition: all ease-in-out 0.4s;
        }

        &:hover {
            width: 15px !important;
            height: 200px !important;
        }
    }

    &:not(.vertical) {
        &.auto-size {
            &:hover {
                height: 15px;
            }
        }

        .range {
            width: 0;
            z-index: 2;
            position: absolute;
            background: var(--accent-color);
            height: 100%;
            border-radius: 5px;

            &.seekable {
                &::after {
                    content: " ";
                    background: var(--accent-color);
                    height: 15px;
                    position: absolute;
                    width: 15px;
                    right: -5px;
                    top: -5px;
                    border-radius: 50%;
                }
            }
        }

        .buffer {
            width: 0;
            bottom: 0;
            position: absolute;
            background: var(--background-color-3);
            height: 100%;
            border-radius: 5px;
            z-index: 1;
        }
    }
}

.waveform {
    width: 100vw;
    position: relative;
    overflow-x: auto;
}

.waveform {
    overflow: auto;
    width: 100%;
    height: 100%;
    position: relative;
    height: 70px;

    .base {
        margin-left: 50%;
        margin-right: 50%;
        object-fit: contain;
        height: 50px;
    }

    .overlay {
        margin-left: 50%;
        margin-right: 50%;
        height: 50px;
        position: absolute;
        top: 0;
        left: 0;
        width: 1px;
        object-fit: cover;
        object-position: left;
        filter: opacity(0.5) drop-shadow(0 0 0 var(--accent-color));
    }
}